<template>
    <a href="javascript:void(0)" class="image-nav-item flex flex-col"
       @click="$putils.goLink(nav.link, data, (item && item.module_data_source_type))">
        <div class="img flex flex-v-center"
             :style="[
                !icon.show && { display: 'none' },
                icon.color && { color: icon.color },
                icon.width && { width: icon.width + 'px', height: icon.width + 'px' },
             ]">
            <img v-if="icon.img" :src="icon.img" />
            <template v-else>
                <i  :class="(isActive ? icon2.icon : icon.icon) || 'fa fa-navicon'"
                    :style="[
                        !isActive && icon.color && { color: icon.color },
                        isActive && icon2.color && { color: icon2.color },
                        icon.size && { fontSize: icon.size + 'px' },
                    ]"></i>
            </template>
        </div>
        <div class="ele-nav-title title"
             v-show="vtitle && vtitle.mode != 'hidden'"
             :style="[
                vtitle && vtitle.mode == 'custom' && {
                    fontSize: vtitle.fontSize + 'px',
                    fontWeight: vtitle.weight,
                    textAlign: vtitle.align,
                },
                vtitle && vtitle.lineHeight && {
                    lineHeight: vtitle.lineHeight
                },
                icon && icon.color && !isActive && {
                    color: icon.color
                },
                icon2 && icon2.color && isActive && {
                    color: icon2.color
                }
             ]">{{data.title}}</div>
    </a>
</template>

<script type="text/javascript">

    import { mapState, mapActions } from 'vuex';

    export default {
        props: [ 'nav', 'data', 'page' ],
        // extends: baseShow,
        data () {
            return {
                border: {},
                bg: {},
                icon: {},
                icon2: {},
                padding: {},
                vtitle: {},
                isActive: false,
            }
        },
        mounted: function () {
            this.calcConfig();
        },
        components: {},
        watch: {
            'nav': {
                deep: true,
                handler() {
                    this.calcConfig();
                }
            },
            'data': {
                deep: true,
                handler() {
                    this.calcConfig();
                }
            },
            'page'() {
                this.calcConfig();
            }
        },
        computed: mapState([

        ]),
        methods: {
            ...mapActions([

            ]),
            calcConfig() {

                let dataIcon = _.cloneDeep(_.get(this.data, 'icon', {}));
                let dataIcon2 = _.cloneDeep(_.get(this.data, 'icon2', {}));
                let dataVtitle = _.cloneDeep(_.get(this.data, 'vtitle', {}));

                this.isActive = this.checkActive();

                if(dataIcon && _.isString(dataIcon)) {
                    try { dataIcon = JSON.parse(dataIcon) } catch (e) { console.log(e) }
                }

                if(dataIcon2 && _.isString(dataIcon2)) {
                    try { dataIcon2 = JSON.parse(dataIcon2) } catch (e) { console.log(e) }
                }

                if(dataVtitle && _.isString(dataVtitle)) {
                    try { dataVtitle = JSON.parse(dataVtitle) } catch (e) { console.log(e) }
                }

                if(dataVtitle && dataVtitle.mode === "default") {
                    dataVtitle = {};
                }

                this.icon = _.defaultsDeep(dataIcon, _.get(this.nav, 'icon'));
                this.icon2 = _.defaultsDeep(dataIcon2, { color: _.get(this.nav, 'icon.activeColor') });
                this.vtitle = _.defaultsDeep(dataVtitle, _.get(this.nav, 'vtitle'));
            },
            checkActive() {
                let pageCode = _.get(this.data, "link.page");

                return pageCode && pageCode === _.get(this.page, "page_code");
            },
        }
    }
</script>
<style lang="scss">

</style>
